<template>
  <div class="ceshi">
    <div id="container" style="height: 100%;border: 1px solid red;"></div>
  </div>
</template>

<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script> <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"</script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>
<script>
  import axios from 'axios'
  import qs from 'qs'
  let echarts = require('echarts/lib/echarts')
  import china from 'echarts/map/js/china.js'
  import hebei from 'echarts/map/js/province/hebei.js'
  import shijiazhuang from 'echarts/map/js/hebei_city/shijiazhuang.js'
  export default {
    name: 'ceshi',
    data() {
      return {

      }
    },
    methods: {

    },
    mounted() {
      var dom = document.getElementById("container");
      var myChart = echarts.init(dom);
      var app = {}, option = null;
      myChart.setOption({
              backgroundColor: 'rgba(0,0,0,0)',//canvas的背景颜色
              environment: './bg.png',//背景星空图
              geo3D: { //地图的具体参数
                  map: 'china', //地图范围
                  shading: 'lambert', //光照带来的明暗
                  light: { // 光照相关的设置。在 shading 为 'color' 的时候无效。
                      main: { //场景主光源的设置
                          intensity: 5,//主光源的强度
                          shadow: true,//主光源是否投射阴影
                          shadowQuality: 'high',//阴影的质量
                          alpha: 30, //主光源绕 x 轴偏离的角度
                          beta:190 //主光源绕 y 轴偏离的角度
                      },
                      ambient: { //全局的环境光设置。
                          intensity: 0//环境光的强度
                      }
                  },
                  viewControl: {//用于鼠标的旋转，缩放等视角控制
                      distance: 50,//默认视角距离主体的距离
                      panMouseButton: 'left',//平移操作使用的鼠标按键
                      rotateMouseButton: 'right',//旋转操作使用的鼠标按键
                      alpha:50 // 让canvas在x轴有一定的倾斜角度
                  },
                  postEffect: {//为画面添加高光，景深，环境光遮蔽（SSAO），调色等效果
                      enable: true, //是否开启
                      SSAO: {//环境光遮蔽
                          radius: 1,//环境光遮蔽的采样半径。半径越大效果越自然
                          intensity: 1,//环境光遮蔽的强度
                          enable: true
                      }
                  },
                  temporalSuperSampling: {//分帧超采样。在开启 postEffect 后，WebGL 默认的 MSAA 会无法使用,分帧超采样用来解决锯齿的问题
                      enable: true
                  },
                  itemStyle: {//三维图形的视觉属性
                      color:'#2355ac',
                      borderWidth:1,
                      borderColor:'#000'
                  },
                  regionHeight: 2//区域的高度
              }
          });

    }
  }
</script>
<style scoped>
  .box{
      background-size:cover;
  }


</style>
